<template lang="html">
  <div class="determine_box">
    <img class="determine_img" src="../../../assets/img/banner/cuxiao_banner.jpg">
    <goods :main="goods_info"></goods>
    <rule :main="rulemain"></rule>
    <ul class="caijiou">
      <li class="ou" @click="jidanji()"><p class="Selected"></p></li>
      <li class="vs"><img src="../../../assets/img/banner/vs.png" height="110" width="110"></li>
      <li class="ji" @click="oudanji()"><p class="Unchecked"></p></li>
    </ul>
    <div class="dianji" @click="del()">确认升级</div>
    <confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></confirm>
  </div>
</template>
<script type="text/javascript">
import confirm from "../../alert/confirm.vue";
import goods from "./goods.vue";
import rule from "./rule.vue";
export default {
  name: 'cuxiao',
  data () {
    return {
      confirmOptions:{},
      goods_info:{},
      backgrounddanji:"Selected",
      backgroundweidan:"Unchecked",
      rulemain:['购买产品未选则增值，可随时退货；','选择增值，增值成功后可以获得价值更高的商品；选择增值，增值成功后可以获得价值更高的商品；','增值后的商品明确质量问题外均不接受'],
      cur_id:"",
      sign:"",
      goodsid:"",
      guess:"1"
    }
  },
  methods:{
    del:function () {
      let seft=this; 
      seft.$refs.myConfirm.showModel();
      seft.confirmOptions= {
        title: "下单",//提示
        title_right: "",//提示
        message: '您升级的是鸡，确认下单么？',
        btnSubmitText: "升级",//确定
        btnCancelText: "取消",//取消
        btnSubmitFunction: function () {
          seft.putonggoodsbuy(seft);
        },
        btnCancelFunction: function () {
          seft.$toast("已取消");
        }
      }
    },
    jidanji:function (){
      document.getElementsByClassName('ou')[0].childNodes[0].className = "Selected";
      document.getElementsByClassName('ji')[0].childNodes[0].className = "Unchecked";
      this.guess = "1";
      console.log(this.guess)
    },
    oudanji:function (){
      document.getElementsByClassName('ou')[0].childNodes[0].className = "Unchecked";
      document.getElementsByClassName('ji')[0].childNodes[0].className = "Selected";
      this.guess = "2";
    },
    determineshuju:(boxmain)=>{
      let cur_id = sessionStorage.getItem("cur_id"),
      sign = sessionStorage.getItem("sign"),
      conent = boxmain,
      routerParams = conent.$route.query.id;
      let _url = "index.php?g=app&m=shopping&a=default_address_and_one_goods_post";
      conent.cur_id = cur_id;
      conent.sign = sign;
      conent.goodsid = routerParams;
      let _addressdata = {
        id:routerParams,
        cur_id:conent.cur_id,
        sign:conent.sign,
        type:"cuxiao"
      }
      conent.$http.post(_url,_addressdata).then(function(data){
          if(data.data.status== "1"){
            conent.goods_info =data.data.data.goods_info;
            conent.goods_info.numer = conent.$route.query.numer;
            conent.goods_info.Total = conent.goods_info.price*conent.goods_info.numer;
          }else {
            
          }
      },function(response){});
    },
    putonggoodsbuy:function(boxmain){
      let _url = '/index.php?g=app&m=shopping&a=goods_buy_post',
      conent = boxmain,
      _data={
        cur_id:conent.cur_id,
        sign:conent.sign,
        num:conent.goods_info.numer,
        id:conent.goodsid,
        guess:conent.guess,
        type:"guess"
      }
      conent.$http.post(_url,_data).then(function(data){
          if(data.data.status== "1"){
            conent.$toast("升级成功");
          }else {
            conent.$toast(data.data.info);
            if(data.data.info =="登录过期，请重新登录"){
              sessionStorage.clear();
              top.location = "index.html";
            }
          }
      },function(response){
          conent.$toast(response);
      })
    }
  },
  created:function(){
    let conent = this 
    conent.determineshuju(conent);
  },
  components:{
    'confirm':confirm,
    'goods':goods,
    "rule":rule
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.determine_box {
  .determine_img{
    width: 100vw;
    height: 53.33vw;
  }
  .caijiou{
    width: @width1;
    margin: 3vw auto;
    overflow: hidden;
    zoom:1;
    li{
      display: inline-block;
    }
    .ou,.ji{
      .icon-kong();
      p{
         border-radius: 50%;
         position: relative;
         top: 1.8vw;
         left: 1.8vw;
         z-index: -1;
      }
      .Selected{
        background-color: @color;
      }
      .Unchecked{
        background-color: @color2;
      }
    }
    .ou{
      p{
        background-color: @color;
        .icon-ou();
      }
    }
    .vs{
      img{
        width: 14.66vw;
        height: 14.6vw;
      }
    }
    .ji{
      p{
        background-color: @color;
        .icon-ji();
      }
    }
  }
  .dianji{
    margin: 0 auto;
    line-height: 13.5vw;
    color: @color1;
    font-size: @h2_font_size;
    .icon-ann();
  }
}

</style>